
import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';


const BarChart=({xData,sData})=>{
    const chartRef=useRef()
    useEffect(()=>{
        //1.生成实例
        const myChart = echarts.init(chartRef.current);
        //2.准备图表参数
        const option = {
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: sData,
              type: 'bar'
            }
          ]
        };
        //3.渲染参数
    option && myChart.setOption(option);
    },[xData,sData])

    return (<div>
            <div ref={chartRef} style={{width:'400px',height:'300px'}}/>
        </div>)
}

export{BarChart}